import React, { memo, forwardRef, useImperativeHandle,useEffect } from 'react'
import { Drawer } from 'antd'
import { LeftOutlined } from '@ant-design/icons'
import './index.scss'
const LdDrawer = forwardRef((props:any,ref:any) => {
    const { placement = 'right', open = true, onClose, width = "calc(100% - 149px)", title = "详情" } = props
    const slotArr = React.Children.toArray(props?.children)
    const actionSlot: any[] = []
    const contentSlot: any[] = []
    slotArr.map((item: any) => {
        const { slot } = item.props
        switch (slot) {
            case 'actionBtn':
                actionSlot.push(item)
                break
            default:
                contentSlot.push(item)
        }
    })
    const handleClose = () => {
        onClose && onClose()
    }
    return (
        <>
            <Drawer mask={false} destroyOnClose={true} className='ld-drawer' closable={false} width={width} placement={placement} open={open} onClose={handleClose}>
                <div className='title'>
                    <span className='back-span' onClick={handleClose}>
                        <LeftOutlined></LeftOutlined>
                        返回
                    </span>
                    <span className="title-span">{title}</span>
                    <div className='action'>
                        {actionSlot.map((item: any, index: number) => {
                            return (
                                <span key={index}>{item}</span>
                            )
                        })}
                    </div>
                </div>
                <div className='content'>
                    {contentSlot.map((item: any, index: number) => {
                        return (
                            <span key={index}>{item}</span>
                        )
                    })}
                </div>
            </Drawer>
        </>
    )
})

export default memo(LdDrawer)